﻿import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
import FilUI

FilButton {
    id: control

    property bool loading                       : false
    property int ringDiameter                   : 16
    property color border_mouse_exited_color    : "#fff4f1"
    property color border_mouse_entered_color   : "#cfe6fe"
    property color inside_released_color        : "#fefbec"
    property color inside_pressed_color         : "#F2E8E5"

    disabled                                    : loading
    contentItem                                 : Item {
        anchors.fill                            : parent
        Row {
            anchors.centerIn                    : parent
            spacing                             : 6

            FilText {
                text                            : control.text
                horizontalAlignment             : Text.AlignHCenter
                verticalAlignment               : Text.AlignVCenter
                font                            : control.font
                color                           : control.textColor
                anchors.verticalCenter          : parent.verticalCenter
            }

            Item {
                width                           : control.loading ? ringDiameter : 0
                height                          : ringDiameter
                anchors.verticalCenter          : parent.verticalCenter
                visible                         : Number(width) !== 0
                clip                            : true
                Behavior on width {
                    enabled                     : FilTheme.animationEnabled
                    NumberAnimation {
                        duration                : 167
                        easing.type             : Easing.OutCubic
                    }
                }
                FilProgressRing {
                    width                       : ringDiameter
                    height                      : ringDiameter
                    strokeWidth                 : 3
                    anchors.centerIn            : parent
                }
            }
        }
    }

    background                                  : Rectangle {
        id: id_rect__bg
        anchors.fill: parent
        radius: 20
        color: inside_released_color
        border.color: border_mouse_exited_color
        border.width: 2

        state: "MouseExited"
        states: [
            State {
                name: "MouseEntered"
                PropertyChanges {
                    target: id_rect__bg
                    border.color: border_mouse_entered_color
                }
            },
            State {
                name: "MouseExited"
                PropertyChanges {
                    target: id_rect__bg
                    border.color: border_mouse_exited_color
                }
            }
        ]
        Behavior on border.color {
            ColorAnimation { duration: 200 }
        }

        // 放置鼠标事件监听区域
        MouseArea {
            anchors.fill: parent
            cursorShape: Qt.PointingHandCursor
            hoverEnabled: !control.loading
            onEntered: {
                id_rect__bg.state = "MouseEntered"
            }
            onExited: {
                id_rect__bg.state = "MouseExited"
            }
        }
    }
    onPressed: {
        id_rect__bg.color = inside_pressed_color
    }
    onReleased: {
        id_rect__bg.color = inside_released_color
    }
}
